<template>
  <div class="od-box">
    <el-row class="od-title" type="flex" align="middle" justify="space-between">
      <h4 class="ot-title">订单详情</h4>
      <el-button size="mini" @click="$router.go(-1)"
        >返回<i class="el-icon-arrow-right el-icon--right"
      /></el-button>
    </el-row>
    <div class="order-main">
      <el-row type="flex" justify="space-between" style="margin-bottom:10px">
        <el-col
          >合并订单状态：<el-tag
            size="mini"
            class="table-tag"
            :type="tags.type"
            >{{ tags.status }}</el-tag
          ></el-col
        >
        <el-col :span="2">
          <el-button type="text" icon="el-icon-edit-outline" size="mini"
            >取消</el-button
          >
          <el-button
            type="text"
            icon="el-icon-delete"
            class="danger"
            size="mini"
            >删除</el-button
          >
        </el-col>
      </el-row>
      <div class="common-table order-table">
        <el-table
          :data="data"
          :default-expand-all="true"
          style="width: 100%;box-shadow: 0px 3px 6px 0px rgb(209 212 215 / 32%);margin-bottom: 3px;"
        >
          <el-table-column
            v-for="(item, index) in column"
            :key="item.prop || index"
            :prop="item.prop"
            :min-width="item.width"
            :align="item.align"
            :label="item.label"
          >
            <template slot-scope="scope">
              <p v-if="item.prop === 'ddmc'" class="color6">
                {{ scope.row[item.prop] }}
              </p>
              <template v-else>{{ scope.row[item.prop] }}</template>
            </template>
          </el-table-column>
        </el-table>
        <!-- 二级表格 -->
        <el-table
          :data="secData"
          :default-expand-all="true"
          style="width: 100%"
          :show-header="false"
        >
          <el-table-column type="expand" width="1">
            <template slot-scope="props">
              <el-table :show-header="false" :data="[1]" style="width: 100%">
                <el-table-column min-width="4%"></el-table-column>
                <el-table-column>
                  <template slot-scope="scope">
                    <div class="order-remark">
                      <i class="el-icon-warning" />备注：
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in column"
            :key="item.prop || index"
            :prop="item.prop"
            :min-width="item.width"
            :align="item.align"
            :label="item.label"
          >
            <template slot-scope="scope">
              <p v-if="item.prop === 'ddmc'" class="color6">
                {{ scope.row[item.prop] }}
              </p>
              <template v-else>{{ scope.row[item.prop] }}</template>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrder, getSecOrder } from '@/api/order';
export default {
  props: ['dialogVisible'],
  data() {
    return {
      ddbh: '',
      tags: {
        type: 'success',
        status: '已下达'
      },
      data: [],
      secData: []
    };
  },
  created() {
    this.ddbh = this.$route.query.ddbh;
    this.column = [
      { prop: 'ddmc', label: '', width: '4%', align: 'center' },
      { prop: 'ddbh', label: '订单编号', width: '10%' },
      { prop: 'pzcode', label: '品牌代码', width: '9%' },
      { prop: 'pz', label: '品牌名称', width: '10%' },
      { prop: 'zb', label: '支别', width: '8%' },
      { prop: 'bzfs', label: '包装方式', width: '9%' },
      { prop: 'zg', label: '纸管', width: '8%' },
      { prop: 'fts', label: '缝头绳', width: '8%' },
      { prop: 'ywc', label: '重量(吨)', width: '8%' },
      { prop: 'ddjq', label: '订单交期', width: '18%' }
    ];
    this.getOrder();
    this.getSecOrder();
  },
  methods: {
    // 获取一级订单
    async getOrder() {
      let form = {
        ddbh: this.ddbh,
        page: 0,
        size: 10
      };
      const res = await getOrder(form);
      if (res.code == 1 && res.data) {
        let { data } = res;
        this.data = data.dataList;
        this.tags.status = this.data[0]['status'];
        this.tags.type =
          this.tags.status == '已下达'
            ? 'success'
            : this.tags.status == '待下达'
            ? 'warning'
            : 'error';
      }
    },
    // 获取二级订单
    async getSecOrder() {
      const res = await getSecOrder({ oriddbh: this.ddbh, page: 0, size: -1 });
      if (res.code == 1) {
        let { data } = res;
        data.dataList.map((item, index) => {
          item.ddmc = `订单${index + 1}`;
        });
        this.secData = data.dataList;
      }
    }
  }
};
</script>

<style lang="scss">
@import '~@/assets/css/order.scss';
</style>
<style lang="scss" scoped>
::v-deep.order-table .el-table {
  .el-table__expand-icon > .el-icon.el-icon-arrow-right {
    display: none;
  }
}
</style>
